<template>
  <div class='container'>
    <div class="mian">
      <div class="title">试题录入</div>
      <el-form ref="refform" :model="form" :rules="rules" label-width="5rem">
        <div id="main">
          <el-form-item label="学科:" prop="subjectID">
            <el-select v-model="form.subjectID" placeholder="请选择" @change="getlearn">
              <el-option v-for='ele in getform.discipline' :key="ele.value" :label="ele.label" :value="ele.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录:" prop='catalogID' ref="catalogID">
            <el-select v-model="form.catalogID" placeholder="请选择">
              <el-option v-for='ele in getform.directory' :key="ele.id" :label="ele.directoryName" :value="ele.id"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="企业:" prop="enterpriseID" ref="catalogID">
            <el-select v-model="form.enterpriseID" placeholder="请选择">
              <el-option v-for='ele in getform.enterprise' :key="ele.id" :label="ele.company" :value="ele.id"></el-option>
            </el-select>
          </el-form-item>
          <div id="city">
            <el-form-item label="城市" class="qqq" prop="province">
              <el-select v-model="form.province" placeholder="请选择">
                <el-option v-for="item in provinces" :key="item.city" :label="item" :value='item'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="city" class="qqqq">
              <el-select v-model="form.city" placeholder="请选择">
                <el-option v-for="item in citys" :key="item.area" :label="item" :value='item'></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="方向:" prop="direction" ref="catalogID">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option v-for='(ele ,index) in direction' :key="index" :label="ele" :value="ele"></el-option>

            </el-select>
          </el-form-item>

          <el-form-item label="题型:" prop='questionType'>
            <el-radio-group v-model="form.questionType" @change="typeChang">
              <el-radio label="1">单选</el-radio>
              <el-radio label="2">多选</el-radio>
              <el-radio label="3">简答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度:" prop='difficulty'>
            <el-radio v-model="form.difficulty" label="1">简单</el-radio>
            <el-radio v-model="form.difficulty" label="2">一般</el-radio>
            <el-radio v-model="form.difficulty" label="3">困难</el-radio>
          </el-form-item>

          <el-form-item label="题干:" prop='question'>
            <quill-editor v-model="form.question" />
          </el-form-item>
          <!-- 选项 -->
          <el-form-item label="选项:" v-if="form.questionType !== '3'">
            <div class='float' v-for='ele,index in form.options' :key='index'>
              <el-radio :label="true" v-if="form.questionType==='1'" v-model="ele.isRight" @change="g1(index)">
                {{ele.code+':'}}
              </el-radio>
              <el-checkbox v-else v-model="ele.isRight" :label='ele.code + ":"'></el-checkbox>
              <el-input placeholder="请输入内容" v-model="ele.title" class="qqqqq"></el-input>

              <ImageUpload class="avatar-uploader el-upload--picture-card" @uodataUrl="uodataUrl($event,index)"></ImageUpload>

            </div>
          </el-form-item>
          <el-form-item>
            <div class="btn">
              <button class="el-button--small" :disabled="form.questionType === '1'" @click.prevent="addQuestionType">+增加预选与答案</button>
            </div>
          </el-form-item>
          <div class="mag">
            <el-form-item label='解析视频:' class="basepx">
              <el-input v-model="form.videoURL" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="答案解析:" prop='answer'>
              <quill-editor v-model="form.answer" />
            </el-form-item>
            <el-form-item label="题目备注:" class="basepx">
              <el-input type="textarea" v-model="form.remarks"></el-input>
            </el-form-item>
            <el-form-item label="试题标签:" class="basepx" ref="catalogID">
              <el-select v-model="form.tags" placeholder="请选择">
                <el-option v-for='(ele,index) in getform.tags' :key="index" :label="ele.label" :value="ele.label"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认提交</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import ImageUpload from '../../api/getList/imageUpload.vue'
// 获取城市
import { provinces, citys } from '../../api/hmmm/citys'
import { choice, add, simple, list, list1, simple1 } from '../../api/getList/getList'
import { direction, questionType } from '../../api/hmmm/constants'
export default {
  name: 'QuestionsNew',
  components: { ImageUpload },
  data () {
    return {
      // 表单
      questionType: questionType,
      direction: direction,
      form: {
        // 选项
        options: [{
          code: 'A',
          title: '',
          img: '',
          isRight: false
        }, {
          code: 'B',
          title: '',
          img: '',
          isRight: false
        }, {
          code: 'C',
          title: '',
          img: '',
          isRight: false
        }, {
          code: 'D',
          title: '',
          img: '',
          isRight: false
        }],
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 城市1
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        checkList: [], // 多选
        choicesinp: '', // 选项input
        choicesinp1: '', // 选项input
        choicesinp2: '', // 选项input
        choicesinp3: '', // 选项input
        videoURL: '', // 解析视频
        desc: '', // 题目标题
        answer: '', // 答案解析
        tags: '', // 试题标签
        remarks: '', // 题目备注
        page: 1,
        pagesize: 10
      },
      // 选项
      xuanxiang: ['E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      // 获取的数据
      getform: {
        discipline: [],
        directory: [],
        enterprise: [],
        tags: []
      },
      // 规则验证
      rules: {
        subjectID: [ // 学科验证
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [ // 目录验证
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [ // 企业验证
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [ // 城市验证
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        direction: [ // 城市验证
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        city: [ // 城市验证
          { required: true, message: ' ', trigger: 'change' }
        ],
        difficulty: [ // 难度验证
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        questionType: [ // 题型验证
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        question: [ // 题干验证
          { required: true, message: '请输入题干', trigger: 'change' }
        ],
        answer: [ // 答案解析验证
          { required: true, message: '请输入答案解析', trigger: 'change' }
        ]

      },
      dialogVisible: false
    }
  },
  computed: {
    provinces () {
      return provinces()
    },
    citys () {
      return citys(this.form.province)
    }
  },
  created () {
    this.getlist()
    this.getlearn()
    this.enterpriseID()
  },
  methods: {
    // 图片改变函数
    uodataUrl (url, index) {
      this.formData.options[index].img = url
    },
    g1 (index) {
      this.form.options.forEach((item) => { item.isRight = false })
      this.form.options[index].isRight = true
      console.log(11111)
    },
    // 多选切换单选全不选
    typeChang () {
      const res = this.form.options.filter((item) => {
        item.isRight = false
      })
      if (res.length >= 2) {
        this.form.options.forEach((item) => {
          item.isRight = false
        })
      }
    },
    // 添加多选 循环options 然后就能添加了 我觉得你看懂不多说了
    addQuestionType () {
      if (this.xuanxiang.length === 0) return this.$message.error('没有更多选项了')
      this.form.options.push({
        code: this.xuanxiang[0], // 代码
        title: '', // 标题
        img: '', // 图片URL
        isRight: false // 是否正确答案
      })
      this.xuanxiang.shift()
    },
    // 方向
    async getlist () {
      const res3 = await choice()
      // console.log(res3)
      this.getform.direction = res3.data.items
    },
    // 学科 关联目录和标签
    async getlearn () {
      //  学科
      const res = await simple()
      this.getform.discipline = res.data
      // 目录 需要三个值 page pagesize 和subjectID
      const res1 = await list(this.form)
      this.form.catalogID = ''
      // console.log(res1)
      this.getform.directory = res1.data.items
      // 标签 同上  找不到 就去form里面找 data里面的
      const res3 = await simple1(this.form)
      this.getform.tags = res3.data
      this.form.tags = ''

      // this.$refs.catalogID.resetFields()
      // console.log(res3)
    },
    // 企业管理 写到方向里面也可以了
    async enterpriseID () {
      const res2 = await list1(this.form)
      // console.log(res2)
      this.getform.enterprise = res2.data.items
    },
    uploadimg (url, index) {
      // console.log(e.target)
      this.form.options[index].img = url
    },
    // 提交表单
    onSubmit () {
      this.$refs.refform.validate(async (ele) => {
        if (!ele) return
        await add(this.form)
        // console.dir(res)
        this.$message.success('提交成功')
        this.$router.push('/questions/choice')
      })
    }

  }
}
</script>
<style lang="scss" scoped>
// 自己写的css样式
.el-button--small {
  background-color: #fab6b6;
  color: #fff;
  border: #fff;
  margin-left: 126px;
}
.avatar-uploader-icon {
  width: 100px;
  height: 60px;
  border: red;
}

.el-select {
  width: 400px;
}

#city {
  position: relative;
}

.qqqqq {
  width: 228px !important;
}
.el-input__inner {
  width: 400px !important;
}
.basepx {
  width: 25rem;
}

.mag {
  margin-top: 3.125rem;
}
.btn {
  position: relative;
  .el-button--small {
    position: absolute;
    bottom: 0.3125rem;
  }
}
.container {
  padding: 1.25rem;
  // background-color: red;
}
#main {
  background-color: #fff !important;
  width: 100%;
  height: 100%;
  padding-top: 1.25rem;
}
.title {
  width: 100%;
  line-height: 3.4375rem;
  height: 3.4375rem;
  background-color: #fff;
  border-bottom: 0.0625rem solid #ccc;
  padding-left: 1.25rem;
}
.float {
  position: relative;
  // padding-bottom: 1.25rem;
  height: 5rem;
  .avatar-uploader {
    position: absolute;
    left: 18.875rem;
    bottom: 69px;
    width: 6.25rem !important;
    height: 3.75rem !important;
    border-radius: 10%;
    border: 0.0625rem dashed #d9d9d9;
    text-align: center;
    .text-qq {
      color: black;
      font-size: 0.875rem;
      line-height: 3.75rem;
    }
  }
}
</style>
